<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>vue_startup</title>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
  <div id="vue_det">
    <!-- {{ }} 用于输出对象属性和函数返回值。 -->
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1> {{details()}}</h1>
    <h1>Alexa : {{alexa}}</h1>
  </div>
  <script type="text/javascript">

    var data = {  // data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
      site: "菜鸟教程",
      url: "www.runoob.com",
      alexa: "1000"
    }
    var vm = new Vue({
      el: '#vue_det', // el 参数，它是 DOM 元素中的 id
      data: data,
      methods: { // 用于定义的函数，可以通过 return 来返回函数值。
        details: function () {
          return this.site + " - 学的不仅是技术，更是梦想!";
        }
      }
    })


    // 它们引用相同的对象
    document.write(vm.site == data.site)
    document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.site = "Runoob"
    document.write(data.site + "<br>")

    // 反之亦然
    data.alexa = 1234
    document.write(vm.alexa)
    document.write("<br>")
    document.write("<br>")

    // Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
    document.write(vm.$data == data)
    document.write("<br>")
    document.write(vm.$el == document.getElementById('vue_det'))
  </script>
</body>

</html>